<template>
  <div class="add-companys">
    <el-form
      :model="companyForm"
      :rules="companyFormRules"
      ref="addRuleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="企业简称：" prop="shortName">
        <el-input v-model="companyForm.shortName" placeholder="请输入" class="shortName"></el-input>
        <el-checkbox v-model="companyForm.isFamous" @change="handleCheckedChange">是否为名企</el-checkbox>
      </el-form-item>
      <el-form-item label="所属公司：" prop="company">
        <el-input v-model="companyForm.company" placeholder="请输入" class="shortName"></el-input>
      </el-form-item>
      <atom-city :label="'企业所在地：'" :size="'medium'" v-model="companyForm" class="atomCity"></atom-city>
      <el-form-item label="方向：" prop="tags">
        <el-input v-model="companyForm.tags" placeholder="请输入" class="tagsInput"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remarks">
        <el-input
          type="textarea"
          v-model="companyForm.remarks"
          :rows="3"
          placeholder="请输入备注"
          class="shortName"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('addRuleForm')">确 定</el-button>
      <el-button @click="resetForm('addRuleForm')">取 消</el-button>
    </span>
  </div>
</template>

<script>
// 添加企业的方法
import { AddCompanys } from '../../assets/api/companys';

// 引入省市联动
import Citydata from '@/views/companys-adm/citydata';

// 引入城市
import atomCity from './atom-city';

export default {
  name: 'addCompanys',
  components: {
    atomCity,
  },
  props: {
    // isaddCompanyShow: {
    //   type: Boolean,
    //   required: true,
    // },
  },
  created() {},
  data() {
    return {
      // 复选框
      // checked: true,
      // 定义省市联动的数据对象
      Citydata,
      companyForm: {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
      },
      companyFormRules: {
        shortName: [
          { required: true, message: '请输入企业简称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
        ],
        province: [{ required: true, message: '请选择省份' }],
        tags: [{ required: true, message: '企业标签不能为空' }],
      },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    // 确定
    async submitForm(formName) {
      // this.companyForm.province = this.companyForm.province.join('');
      // this.companyForm.city = '济南';
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 发送请求
          await AddCompanys({
            isFamous: this.companyForm.isFamous,
            shortName: this.companyForm.shortName,
            company: this.companyForm.company,
            province: this.companyForm.province,
            city: this.companyForm.city,
            tags: this.companyForm.tags,
            remarks: this.companyForm.remarks,
          });
          // 告诉父元素
          this.$emit('addData');
        } else {
          return false;
        }
      });
      // 单独将城市选择框置kong
      this.companyForm = {};
      // 重置
      this.$refs[formName].resetFields();
      // 关闭对话框
      this.$emit('close');
    },
    // 取消
    resetForm(formName) {
      // 单独将城市选择框置kong
      this.companyForm = {};
      // 重置
      this.$refs[formName].resetFields();
      // 关闭对话框
      this.$emit('close');
    },
    // 修改复选框的值
    handleCheckedChange() {
      this.companyForm.isFamous = !this.companyForm.isFamous;
    },
  },
};
</script>

<style lang='less' scoped>
.el-form {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  padding-top: 10px;
  .el-form-item {
    max-width: 500px;
    .tagsInput {
      width: 150px;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.atomCity {
  position: relative;
  left: 5px;
  margin-bottom: 20px;
}
.shortName {
  width: 286px;
  margin-right: 20px;
}
</style>
